<template>
  <div class="auth_information_page">
    <div class="information_box">
      <div class="item_box">
        <div class="content_box" @click="camera('positive')">
          <span v-if="!positive"><van-icon size="2rem" name="photograph" /></span>
          <input type="file" class="img_input"
                 id="take-positive" accept="image/*">
          <img v-if="positive" class="camera_img" :src="positive">
        </div>
        <div class="title_box">
          <span>法人代表身份证正面</span>
        </div>
      </div>

      <div class="item_box">
        <div class="content_box" @click="camera('negative')">
          <span v-if="!negative"><van-icon size="2rem" name="photograph" /></span>
          <input type="file" class="img_input"
                 id="take-negative" accept="image/*">
          <img v-if="negative" class="camera_img" :src="negative">
        </div>
        <div class="title_box">
          <span>法人代表身份证反面</span>
        </div>
      </div>

      <div class="item_box">
        <div class="content_box" @click="camera('license')">
          <span v-if="!businessLicense"><van-icon size="2rem" name="photograph" /></span>
          <input type="file" class="img_input"
                 id="take-license" accept="image/*">
          <img v-if="businessLicense" class="camera_img" :src="businessLicense">
        </div>
        <div class="title_box">
          <span>营业执照 {{businessLicense}}</span>
        </div>
      </div>

      <div class="next_box">
        <van-button type="info" @click="next" block>提交</van-button>
      </div>
    </div>
    <div class="next_box"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      positive: '',
      negative: '',
      businessLicense: ''
    };
  },
  methods: {
    getImage(val) {
      if (val === 'positive') {
        document.getElementById('take-positive').click();
        const takePicture = document.querySelector('#take-positive');
        takePicture.onchange = (event) => {
          const { files } = event.target;
          let file;
          if (files && files.length > 0) {
            [file] = files;
          }
          const fileReader = new FileReader();
          fileReader.readAsDataURL(file);
          fileReader.onload = (Event) => {
            this.positive = Event.target.result;
          };
          // this.positive = this.fileToData(file);
        };
      }
    },
    camera(item) {
      const takePositive = document.querySelector('#take-positive');
      const takeNegative = document.querySelector('#take-negative');
      const takeLicense = document.querySelector('#take-license');
      switch (item) {
        case 'positive':
          this.getPicture(takePositive, 'positive');
          break;
        case 'negative':
          this.getPicture(takeNegative, 'negative');
          break;
        case 'license':
          this.getPicture(takeLicense, 'businessLicense');
          break;
        default:
          this.$toast({ position: 'bottom', message: '出错啦' });
      }
    },
    getPicture(ele, val) {
      const Element = ele;
      Element.click();
      Element.onchange = (event) => {
        const { files } = event.target;
        let file;
        if (files && files.length > 0) {
          [file] = files;
        }
        if (!file) return;
        const fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onload = (Event) => {
          this.$set(this, val, Event.target.result);
        };
      };
    },
    next() {
      this.$toast({ position: 'bottom', message: '提交成功' });
      // this.$router.push('/authVideo');
    }
  },
  created() {
  }
};
</script>

<style lang="less">
.auth_information_page {
  height: 100%;
  .information_box {
    background-color: #fff;
    .item_box {
      width: 90%;
      margin-left: 5%;
      border-bottom: solid 1px #ccc;
      padding: 0.625rem 0;
      .content_box {
        height: 11.25rem;
        border-radius: 0.25rem;
        background-color: #BBB;
        .camera_img{
          width: 100%;
          height: 100%;
        }
        .img_input{
          display: none;
        }
        span {
          padding-left: calc(50% - 1rem);
          display: block;
          padding-top: 5rem;
        }
      }
      .title_box {
        font-size: 0.875rem;
        padding: 0.5rem 0 0;
        text-align: center;
      }
    }
  }
  .next_box {
    padding: 0.8rem;
  }
}
</style>
